<template>
  <el-dialog v-model="dialog" title="部门消息" width="912px" center destroy-on-close>
    <el-container>
      <el-aside width="416px">
        <div class="message-list-wrapped">
          <div class="list-table-content">
            <el-table :data="tableData" style="width: 100%" highlight-current-row @row-click="getDetail">
              <el-table-column type="index" width="50" />
              <el-table-column width="5">
                <template #default="{ row }">
                  <div class="noread"></div>
                </template>
              </el-table-column>
              <el-table-column label="主题" prop="message_title">
                <template #default="{ row }">
                  <div class="title-wrapped">
                    <div class="title">{{ row.message_title }}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="等级" prop="message_level">
                <template #default="{ row }">
                  <el-tag class="mx-1" round v-if="row.message_level == '一般'">
                    {{ row.message_level }}
                  </el-tag>
                  <el-tag class="mx-1" round v-if="row.message_level == '重要'" type="warning">
                    {{ row.message_level }}
                  </el-tag>
                  <el-tag class="mx-1" round v-if="row.message_level == '必要'" type="danger">
                    {{ row.message_level }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="发布日期" prop="message_publish_time">
                <template #default="{ row }">
                  <div>{{ row.message_publish_time?.slice(0, 10) }}</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-aside>
      <el-main>
        <div class="detail-wrapped" v-if="messageInfo.message_title !== ''">
          <div class="message_title">{{ messageInfo.message_title }}</div>
          <div class="message_content" v-html="messageInfo.message_content"></div>
        </div>
        <div class="detail-wrapped" v-else>
          <span>请点击列表中的消息进行查看</span>
        </div>
      </el-main>
    </el-container>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, defineExpose, watch } from "vue"
import { readMessageAPI, getUserMsgAPI, getDepartmentMsgAPI } from "../api/department_msg"
import { updateClickNumAPI } from "../api/message"
import { msgInfo } from '../store/msglist'
import { Store } from "pinia"
import { defineEmits } from 'vue'
import { useUserInfo } from '../store/userinfo'

const userStore = useUserInfo() as Store<"userinfo", { imageUrl: string; name: string; sex: string; department: string; identity: string; account: string; email: string; }, {}, { userInfo }>

// 定义emit
const emit = defineEmits(['updateisRead'])

const msgStore = msgInfo() as Store<"msginfo", { msgList: string }, { msgInfo }>

let msgList = JSON.parse(localStorage.getItem("msginfo") as string)?.msgList

let tableData = ref([])

const messageInfo = reactive({
  message_title: "",
  message_content: "",
})

let department = JSON.parse(localStorage.getItem("userinfo") as string)?.department

const id = localStorage.getItem("id")


// 监听部门变化 从而改变接受到的消息
watch(() => userStore.department,
  async (newDepartment, oldDepartment) => {
    if (newDepartment !== oldDepartment) {
      try {
        const res = await getDepartmentMsgAPI({ id, department: newDepartment });
        tableData.value = res.data.data
        msgStore.msgInfo(id)
      } catch (error) {
        console.error('获取部门消息失败:', error);
      }
    }
  },
  { deep: false, immediate: false }
);


// 获取部门消息列表
const getUserMsg = async () => {
  msgStore.msgInfo(id)
  const res = await getUserMsgAPI({ id })
  tableData.value = res.data.data
  msgStore.msgInfo(id)
}
if (department != '' && department != null) {
  msgStore.msgInfo(id)
  getUserMsg()
}

// 点击查看消息详情
const getDetail = async (row: any) => {
  await updateClickNumAPI({
    id: row.id,
    message_click_number: row.message_click_number
  })
  await readMessageAPI({ readId: row.id, id });
  msgStore.msgInfo(id)
  messageInfo.message_title = row.message_title
  messageInfo.message_content = row.message_content

  // 未读消息的红点 传给父组件
  let isRead = ref(false)


  if (msgList.length > 0) {
    isRead.value = true
  } else {
    isRead.value = false
  }
  emit('updateisRead', isRead.value)
}

// 弹窗默认为false
const dialog = ref(false)



// 暴露open
const open = () => {
  dialog.value = true
  if (department != '' && department != null && msgList != null) {
    getUserMsg()
    // 重置成默认的表格的内容
    if (msgList.length - 1 <= 0) {
      messageInfo.message_title = ''
    }
  }
}

defineExpose({
  open
})


</script>

<style lang="scss" scoped>
.el-aside {
  padding-left: 8px;
  min-height: 500px;
}

.el-main {
  min-height: 500px;
  --el-main-padding: 0px;
  border-left: 1px solid #eee;
}

.message-list-wrapped {
  height: 500px;
}

.list-table-content {
  min-height: 10px;
  padding: 8px;
}

.el-table {
  height: 100%;

  .title-wrapped {
    display: flex;
    align-items: center;
  }

  .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.readed {
  display: block;
  width: 5px;
  padding: 1px;
  height: 5px;
  border-radius: 50%;
  background: #a9a9a9;
}

.noread {
  display: block;
  width: 5px;
  padding: 1px;
  height: 5px;
  border-radius: 50%;
  background: #ffa500;
}

.detail-wrapped {
  padding: 8px;
  text-align: center;

  span {
    text-align: center;
    display: block;
    transform: translateY(700%);
    font-size: 14px;
  }

  .message_title {
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
